<template>
  <!-- search -->
  <div class="header-search-box">
    <i class="iconfont icon-search" @click.stop="_click"></i>
    <div class="head-search-input" :class="isFcous ? 'active' : ''">
      <input
        ref="searchInput"
				@keyup.enter="enterClick"
        @blur="isFcous = false"
				v-model="searchText"
        type="text"
        placeholder="Search..."
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFcous: false,
			searchText: ''
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    _click() {
      this.isFcous = true;
      this.$nextTick(() => {
        this.$refs.searchInput.focus();
      });
    },
		enterClick() {
			this.$router.push({path: '/product', query: {title: this.searchText}})
		}
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.header-search-box {
  display: flex;
  // width: 150px;
  .iconfont {
    font-size: 24px;
  }
  .head-search-input {
    width: 0;
    margin-left: 5px;
    transition: width 0.2s;
    &.active {
      width: 110px;
    }
    input {
      width: 100%;
      outline: none;
      border: 0;
      border-bottom: 1px solid #1a1a1a;
    }
  }
}
</style>
